<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>

        div {

            width: 200px;

            height: 300px;

            background-size: cover;

        }

</style>
</head>

<body>
    <div id="app">
        <p>在图片加载前，实现背景颜色的占位，图片加载完成之后可以直接渲染到页面上</p>
        <div v-imgurl='url'></div>
    </div>
    <script>
        Vue.directive('imgurl',{
            inserted:function(el,binding){
                var color=Math.floor(Math.random()*1000000);
                el.style.backgroundColor="#"+color;
                var img=new Image();
                img.src=binding.value;
                img.onload=function(){
                    el.style.backgroundColor='';
                    el.style.backgroundImage="url("+binding.value+")";
                }
            }
        })
        var vm=new Vue({
           el:'#app',
           data:{
               url:'002.png'
           },
           methods:{}
        });
    </script>
</body>

</html>